<template>
  <div class="serveNo">
    <page-box class="serve-pagebox">
      <template #top>
        <alert-msg content="外显号：即通过系统外呼时，客户看到的来电号码。">
          <template #icon>
            <i class="MC_iconfont MC_icon-xinxi-mian"></i>
          </template>
        </alert-msg>
      </template>
      <template #search>
        <search-form :fieldList="fieldList" :form="form" @onSearchFun="searchFun"></search-form>
      </template>
      <template #btn>
        <el-button type="default" class="search-btn" @click="searchFun">查询</el-button>
      </template>
      <template #table>
        <resize-table
          :topHeight="104"
          :headers="tableHeaders"
          :data="tableData"
          :pagingData="pagingData"
          @onPageChange="handleCurrentChange"
          @onPageSizeChange="handleSizeChange"
          @onCheckHeadersChange="checkHeadersChange"
          :showPagination="true"
          :batchs="batchs"
        >
          <template #status="{ scope }">
            <span v-if="scope.row.status === 0"><i class="fail" />停用</span>
            <span v-else-if="scope.row.status === 1"><i class="success" />启用</span>
          </template>
          <template #oprate="{ scope }">
            <span class="edit" @click="editExplicitNo(scope.row)">编辑</span>
          </template>
        </resize-table>
      </template>
    </page-box>
    <edit-explicit-no
      ref="editExplicNo"
      :fieldList="fieldList"
      :form="form"
      @onChange="explicitUpdateSuccess"
    ></edit-explicit-no>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, getCurrentInstance, onBeforeMount, onMounted } from 'vue'
import searchForm from '@/common/components/base-form/form.vue'
import resizeTable from '@/common/components/resize-table/index.vue'
import editExplicitNo from './edit-explicit.vue'
import pageBox from '@common/components/page-box.vue'
import alertMsg from '@common/components/alert/index.vue'
import { getExplicitNo } from '@app/call-center/apis/number-manage'
import { commonStore } from '@/common/store/modules/common'
import mcCache from '@/common/utils/mc-get-cache'
import { userModule } from '@/common/store/modules/user'
interface State {
  fieldList: Record<string, unknown>[]
  form: any
  tableHeaders: Record<string, unknown>[]
  tableData: Record<string, unknown>[]
  pagingData: any
  resourceTypeList: any
}
export default defineComponent({
  name: 'explicitNo',
  components: {
    searchForm,
    resizeTable,
    editExplicitNo,
    pageBox,
    alertMsg
  },
  // ----------------生命周期-----------------------
  setup() {
    const USERMODULE = userModule()
    const state: State = reactive({
      fieldList: [
        {
          name: '外显号',
          field: 'fuzzyQuery',
          type: 'text'
        },
        {
          name: '资源类型',
          field: 'type',
          type: 'dropdown',
          choices: [
            { label: '全部', value: '' },
            { label: '小号', value: 'xNumber' },
            { label: '固话号码', value: 'trunkNumber' },
            { label: '呼转号码', value: 'callAgentNumber' }
          ]
        },
        {
          name: '状态',
          field: 'status',
          type: 'dropdown',
          choices: [
            { label: '全部', value: '' },
            { label: '启用', value: '1' },
            { label: '停用', value: '0' }
          ]
        }
      ],
      form: {
        fuzzyQuery: '',
        type: '',
        status: ''
      },
      tableHeaders: [
        { label: '外显号', prop: 'number', show: true },
        { label: '类型', prop: 'typeName', show: true },
        { label: '号码归属', prop: 'location', show: true },
        { label: '专属外显号', prop: 'uidName', show: true },
        { label: '状态', prop: 'status', show: true, custom: true },
        { label: '操作', prop: 'oprate', show: true }
      ],
      tableData: [],
      pagingData: {
        page: 1,
        total: 0,
        limit: 10
      },
      resourceTypeList: [
        { label: '小号', value: 'xNumber' },
        { label: '固话号码', value: 'trunkNumber' },
        { label: '呼转号码', value: 'callAgentNumber' }
      ]
    })

    const instance: any = getCurrentInstance()

    const editExplicitNo = (row: any) => {
      instance?.refs.editExplicNo.openEditExplicNo(row)
    }

    const filterMethod = (query: any, item: any) => {
      return item.label.indexOf(query) > -1
    }

    const checkHeadersChange = (checkList: any) => {
      state.tableHeaders = checkList
    }

    const handleCurrentChange = (page: number) => {
      state.pagingData.page = page
      getExplicitNos()
    }

    const handleSizeChange = (size: number) => {
      state.pagingData.limit = size
      getExplicitNos()
    }

    // 查询
    const searchFun = () => {
      state.pagingData.page = 1
      getExplicitNos()
    }

    // 编辑成功请求数据
    const explicitUpdateSuccess = () => {
      getExplicitNos()
    }

    // 获取表格数据
    const getExplicitNos = () => {
      const sendData = {
        ...state.form,
        pageSize: state.pagingData.limit,
        pageNumber: state.pagingData.page,
        accountId: USERMODULE.accountId || '',
        callAbility: '2,3'
      }
      getExplicitNo(sendData).then((res) => {
        if (res.success && res.data) {
          const list = res.data.list || []
          list.forEach((item: any) => {
            const obj: any = commonStore().publicCache.userCacheObj
            const agentArr: any = []
            // 专属外显回显
            item.agents.forEach((val: any) => {
              const agentObj: any = obj[val] || {}
              agentArr.push(agentObj ? agentObj.name : '')
              item.uidName = agentArr.join('、')
            })
            // 号码类型回显
            state.resourceTypeList.forEach((item3: any) => {
              if (item3.value == item.resourceType) {
                item.typeName = item3.label
              }
            })
            item.location = item.province && item.district ? item.province + '-' + item.district : ''
          })
          state.tableData = list
          state.pagingData.total = res.data.page.total
        }
      })
    }

    onMounted(async () => {
      mcCache.$getCache('userCache', 'hasObj')
      getExplicitNos()
    })

    return {
      ...toRefs(state),
      editExplicitNo,
      filterMethod,
      checkHeadersChange,
      handleCurrentChange,
      handleSizeChange,
      searchFun,
      explicitUpdateSuccess
    }
  }
})
</script>

<style lang="stylus" scoped>
.serveNo
  :deep(.serve-pagebox)
    .box
      padding 16px 24px
  .edit,.delete
      color var(--mc-main-color)
      cursor pointer
  .el-alert
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0px 16px;
      gap: 8px;
      width: 100%;
      height: 40px;
      background: linear-gradient(0deg, rgba(28, 97, 241, 0.1), rgba(28, 97, 241, 0.1)), #FFFFFF;
      border-radius: 4px;
      flex: none;
      order: 2;
      align-self: stretch;
      flex-grow: 0;
      font-size: 14px;
      line-height: 40px;
      letter-spacing: 0.001em;
      color: rgba(0, 0, 0, 0.88);
      :deep(.el-icon)
          color var(--mc-link-color)
  :deep(.el-transfer-panel)
    width 220px
.fail, .success{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;

  &.fail {
    background: var(--mc-error-color);
  }

  &.success {
    background: var(--mc-success-color);
  }
}
</style>
